<!doctype html>
<html lang="en">
	<head>
	<meta charset="utf-8"/>
		<title>Myths of Massage</title>
		<link href="styles/styles.css" rel="stylesheet" type="text/css"/>
		<script src="scripts/draganddrop.js" language="javascript"></script>
		<script src="scripts/scripts.js" language="javascript"></script>
	</head>
	<body id="bodymassage" onload="javascript:visitMassageMyths()">
	
		<nav>
			<div id="drop" align="center">
				<ul>
					<li id="option0"><a href="intro.html">Intro Page</a></li>
					<li id="option1"><a href="profile.html">Profile Page</a></li>
					<li id="option2"><a href="#">Nutrition</a>
						<ul id="option2">
							<li><a href="nutrition-myths.html">Myths of Nutrition</a></li>
							<li><a href="nutrition1.html">Nutrition 101</a></li>
							<li><a href="nutrition2.html">Nutrition 201</a></li>
						</ul>
					</li>
					<li id="option3"><a href="#">Exercise</a>
						<ul id="option3">
							<li><a href="exercise-myths.html">Myths of Exercise</a></li>
							<li><a href="targetheartrate.html">Target Heart Rate</a></li>
							<li><a href="exercise1.html">Exercise 101</a></li> 
						</ul>
					</li>
					<li id="option4"><a href="#">Massage</a>
						<ul id="option4">
							<li><a href="massage-myths.html">Myths of Massage</a></li> 
							<li><a href="massage1.html">Massage 101</a></li> 
							<li><a href="massage2.html">Personalizing Your Massage</a></li> 
						</ul>
					</li>
					<li id="optionX"><a href="assessment.html" id="assessmentlink" class="hide">Final Assessment</a>
						</li>
					</ul>
				</ul>
			</div>
		</nav>
		
		
			
        		<header>
            		<div align="center"><h1>Massage Myths vs. Facts</h1><br/>
          		</header>
            
            <article>
            <section>
         		<div id="spacing"><form name="dd1" onsubmit="javascript:processForm(); return false;"> 
 					Test your knowledge about massage by matching the massage myth with its fact. Read a myth and then the facts. 
 					Select the myth and drag it over the fact you believe it matches.  
 					Continue this same process until all myths have been matched to their factual counterparts. 
 					Click on 'Submit Your Answers' to get your results. 
 					Discover more about what massage therapy can offer by selecting Massage 101 from the Massage menu.
				
				<div class="column">
				<div align="center">
					<h3>Myths</h3>
						 <div id="d1" value="3" class="dragger" draggable="true"
				     		ondragstart="return startDrag( event )"
				     		ondragend="return endDrag( event )"><p>Massage does not provide any benefits other than relaxation.</p></div><br/>  
				     	<div id="d2" value="2" class="dragger" draggable="true"
				     		ondragstart="return startDrag( event )"
				     		ondragend="return endDrag( event )"><p>Massage is too expensive.</p></div><br/>                        
				 		<div id="d3" value="0" class="dragger" draggable="true"
				     		ondragstart="return startDrag( event )"
				     		ondragend="return endDrag( event )"><p>Massages are too time consuming.</p></div><br/>  
					 	<div id="d4" value="1" class="dragger" draggable="true"
				     		ondragstart="return startDrag( event )"
				     		ondragend="return endDrag( event )"><p>Massage can be painful.</p></div><br/>  
				</div>
				<br/>
				    
				<div class="column">
				<div align="center">
					<h3>Facts</h3>
				     	<div id="db1" value="0" class="draggerbay" 
				     		ondrop="return dropDragger( event )"
				     		ondragover="return false"
				     		ondragenter="return enterDragger( event )"><p>A 90-minute, monthly massage is all that is needed.</p></div><br/>                        
				 		<div id="db2" value="1" class="draggerbay"
				     		ondrop="return dropDragger( event )"
				     		ondragover="return false"
				     		ondragenter="return enterDragger( event )"><p>A therapist should work in your comfort zone and gradually go deeper.</p></div><br/>  
					 	<div id="db3" value="2" class="draggerbay"
				     		ondrop="return dropDragger( event )"
				     		ondragover="return false"
				     		ondragenter="return enterDragger( event )"><p>Reasonable rates are available or a cut in the monthly budget is usually possible.</p></div><br/> 
					 	<div id="db4" value="3" class="draggerbay"
				     		ondrop="return dropDragger( event )"
				     		ondragover="return false"
				     		ondragenter="return enterDragger( event )"><p>Massage increases circulation aids emotional well-being, flexibility and exensibility.</p></div><br/>  
				
				<p id="response">&nbsp;</p>
				<input type="submit" name="button" value="Submit Your Answer"/><br/>
				</form>
            </section>
				</div>
				</div>
        </article>
        
    	<footer>
    		<div align="center">
    			<audio controls="controls" autoplay="autoplay">
  					<source src="audio/massageemyths.ogg" type="audio/ogg"/>
 		 			<source src="audio/massagemyths.mp3" type="audio/mpeg"/>
				</audio>
    		</div>
        </footer>
		</div>
	</body>
</html>